<template>
    <div class="wholeContainer" @click="cancelComment">
      <ForumDetailItem :postId="postId" @showComId="showComment" @shEdit="getShowEdit"/>
      
      <div class="commentInput" @click.stop="" v-if="cInputShow">
        <CommentInput :postId="postId" @commentContent="getContent" />
      </div>
      <div v-if="showEdit" class="editContainer">
        <EditPost :postId="postId" />
      </div>
      <div class="commentContainer">
        <div v-for="(commentItem,index) in commentList" :key="index">
          <CommentItem :commentItem="commentItem" @deleteComment="deleteComment"/>
        </div>
      </div>
    </div>
</template>

<script>
import ForumDetailItem from '../components/ForumDetailItem.vue'
import CommentInput from '../components/commentInput.vue'
import CommentItem from '../components/commentItem.vue'
import EditPost from '../components/editPost.vue'
export default {
  name: 'ForumDetail',
  data(){
    return {
        postId:this.$route.query.postId,
        cInputShow:false,
        commentTo:0,
        commentType:0,
        commentList:[],
        showEdit:false
    }
  },
  components: {
    ForumDetailItem,
    CommentInput,
    CommentItem,
    EditPost
  },
  methods:{
    showComment(val){
      this.cInputShow = true
      this.commentTo = val
      this.commentType = 0
    },
    getShowEdit(val){
      this.showEdit = true
    },
    cancelComment(){
      this.cInputShow = false
      this.showEdit = false
    },
    getContent(content){
      this.$axios({
        method:'post',
        url:'/api/comments',
        data:{
          commentType:this.commentType,
          replyId:this.commentTo,
          userId:localStorage.getItem('userId'),
          content:content,
        },
        headers:{
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        }
      }).then(res=>{
        if(res.data.code==1){
          this.$axios({
            method:'get',
            url:`/api/comments/${this.$route.query.postId}/0`,
            headers:{
              'Content-Type':'application/json',
              'token':localStorage.getItem('token')
            }
          }).then(res1=>{
            // console.log(res)
            if(res1.data.code==1){
              this.commentList = res1.data.data
            }
            this.$forceUpdate()
            this.cInputShow = false
          })
        }
      })
    },
    deleteComment(val){
      this.$axios({
        method:'get',
        url:`/api/comments/${this.$route.query.postId}/0`,
        headers:{
          'Content-Type':'application/json',
          'token':localStorage.getItem('token')
        }
      }).then(res=>{
        // console.log(res)
        if(res.data.code==1){
          this.commentList = res.data.data
        }
        this.$forceUpdate()
      })
    }
  },
  mounted(){
    // console.log(this.$route.query)
    this.$axios({
      method:'get',
      url:`/api/comments/${this.$route.query.postId}/0`,
      headers:{
        'Content-Type':'application/json',
        'token':localStorage.getItem('token')
      }
    }).then(res=>{
      // console.log(res)
      if(res.data.code==1){
        this.commentList = res.data.data
      }
    })
  }
}
</script>

<style scoped>
  .wholeContainer{
      width: 100%;
      height: 100%;
      position: fixed;
      background-color: #4d4d4d;
      overflow-y:scroll;
      overflow-x:hidden;
      padding-right: 25px;
      padding-left: 25px;
  }
  .commentContainer{
    padding-bottom: 70px;
  }
  .editContainer{
    /* 可上下滑动 */
  }
  .commentInput{

  }
  .ql-editor{
         height:400px;
     }
</style>
